<style lang='scss' scoped>
.invite {
    width: 100%;
    height: 99.9%;
    font-size: 0.8rem;
    overflow: auto;
    .invite_box {
        .swp_tabs {
            padding: 0.8rem;
            .swiper_style {
                height: 36rem;
                .yq {
                    padding: 1rem 0.8rem;
                    background-color: #fff;
                    border-radius: 0.5rem;
                    .top {
                        display: flex;
                        justify-content: space-between;
                        .left {
                            border-right: 1px solid #ccc;
                        }
                        .left,
                        .right {
                            flex: 1;
                            padding: 0 0.8rem;
                            .num {
                                font-size: 1.6rem;
                                font-weight: bold;
                                margin: 0.5rem 0;
                            }
                            .test {
                                :nth-child(2) {
                                    color: #fa8d50;
                                    display: inline-block;
                                    margin-left: 0.2rem;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                    .button {
                        margin-top: 1rem;
                        text-align: right;
                        .btn {
                            display: inline-block;
                            padding: 0.4rem 2rem;
                            border-radius: 0.2rem;
                            background-color: #fa8d50;
                            color: #fff;
                        }
                    }
                }
                #qrcode {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                }
            }
        }
    }
}
</style>

<template>
    <view class='invite'>
        <u-navbar title="邀请会员"> </u-navbar>
        <view class='invite_box'>
            <!-- top_tabs -S -->
            <u-tabs-swiper ref="uTabs" :list="state.list" :current="state.current" @change="tabsChange" :is-scroll="false" swiperWidth="750" :bgColor="''" :activeColor="'#fa8d50'" :bold="false"></u-tabs-swiper>
            <!-- top_tabs -E -->
            <!-- swp_tabs -S -->
            <view class='swp_tabs'>
                <swiper :current="state.swiperCurrent" class="swiper_style">
                    <swiper-item @touchmove.stop>
                        <u-swiper :list="state.swiperlist" :effect3d="true" :autoplay="false"></u-swiper>
                    </swiper-item>
                    <swiper-item @touchmove.stop>
                        <view class='yq'>
                            <view class='top'>
                                <view class='left'>
                                    <view class='name'>
                                        我的邀请（人）
                                    </view>
                                    <view class='num'>2</view>
                                    <view class='test'>
                                        <text>今日新增</text>
                                        <text>0</text>
                                    </view>
                                </view>
                                <view class='right'>
                                    <view class='name'>
                                        邀请收益（元）
                                    </view>
                                    <view class='num'>
                                        2
                                    </view>
                                    <view class='test'>
                                        <text>今日新增</text>
                                        <text>0</text>
                                    </view>
                                </view>
                            </view>
                            <view class='button'>
                                <view class='btn'>
                                    提现
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item @touchmove.stop>
                        <view class='yq'>
                            <view class='top'>
                                <view class='left'>
                                    <view class='name'>
                                        团队邀请（人）
                                    </view>
                                    <view class='num'>2</view>
                                    <view class='test'>
                                        <text>今日新增</text>
                                        <text>0</text>
                                    </view>
                                </view>
                                <view class='right'>
                                    <view class='name'>
                                        邀请分成收益（元）
                                    </view>
                                    <view class='num'>
                                        2
                                    </view>
                                    <view class='test'>
                                        <text>今日新增</text>
                                        <text>0</text>
                                    </view>
                                </view>
                            </view>
                            <view class='button'>
                                <view class='btn'>
                                    提现
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <!-- swp_tabs -E -->
            <!-- 生成二维码组件 -S -->
            <u-urcode ref="uQRCoderef"></u-urcode>
            <!-- 生成二维码组件 -E -->
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const uQRCoderef = ref(null);
const state = reactive<{
    list: Array<any>;
    current: number;
    swiperCurrent: number;
    swiperlist: Array<any>;
}>({
    swiperlist: [
        {
            image: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
        {
            image: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
        {
            image: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
    ],
    swiperCurrent: 0,
    current: 0,
    list: [
        {
            name: "邀请海报",
        },
        {
            name: "我的邀请",
        },
        {
            name: "团队邀请",
        },
    ],
});
onLoad(() => {
    console.log("onLoad");
});
onShow(() => {
    // nextTick(() => {
    //     // 生成二维码 -s
    //     uQRCoderef.value
    //         .shengcheng({ text: "https://www.baidu.com" })
    //         .then((res) => {
    //             console.log(">>>>>>>>>>>", res);
    //         });
    //     // 生成二维码 -e
    // });
});
const tabsChange = (e) => {
    state.current = e;
    state.swiperCurrent = e;
};
</script>